<template>
  <a-button type="text" @click="onClick">
    <span class="button-wrap">
      <a-badge :count="publishCount">
        <span style="color: rgba(0, 0, 0, 0.25)" id="publish-button">
          发布管理
        </span>
      </a-badge>
      <span style="font-size: 12px; margin: 1px 0 0 6px">
        <right-outlined />
      </span>
    </span>
  </a-button>
  <a-drawer
    v-model:open="open"
    title="发布管理"
    placement="right"
    width="464"
    class="drawer"
    destroy-on-close
  >
    <publish-drawer-content :key="publishDrawerContentKey" />
  </a-drawer>
</template>
<script setup>
import { RightOutlined } from '@ant-design/icons-vue'
import { ref } from 'vue'
import PublishDrawerContent from './publish-drawer-content.vue'
import {
  usePublishCount,
  usePublishDrawerContentKey,
} from './provide-context.js'
import 'v3-infinite-loading/lib/style.css'
import calendar from 'dayjs/plugin/calendar'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
dayjs.extend(calendar)

import { getFileInfoList } from '@/api/db.js'
import { useDbType } from './provide-context.js'
/**
 * 全局数据
 */
let publishCount = usePublishCount()
let publishDrawerContentKey = usePublishDrawerContentKey()

/**
 * 抽屉相关
 */
let open = ref(false)
/**
 * 数据
 */
//历史数据
let loading = ref(false)
let history = ref([])
/**
 * 事件
 */
async function onClick() {
  open.value = true
}

let page = 1
let pageSize = 10
let completed = ref(false)
let dbType = useDbType()
async function load(event) {
  loading.value = true
  try {
    let result = await getFileInfoList(
      {
        pageIndex: page,
        pageSize,
        dataType: 'file',
      },
      dbType,
    )
    let json = result?.data?.edDataInfo?.list || []
    console.log(json)
    history.value.push(...json)
    if (json.length < 10) {
      event.complete()
      completed.value = true
    } else {
      event.loaded()
      page++
    }
  } catch (error) {
    console.log(error)
    event.error()
  }
  loading.value = false
}
</script>
<style lang="less" scoped>
.button-wrap {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.25);
}
.drawer {
  // .time {
  //   color: rgba(0, 0, 0, 0.15);
  //   text-align: center;
  //   margin-bottom: 6px;
  // }
  // .ant-divider {
  //   margin: 20px 0;
  // }
}
</style>
